<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位和绝对定位</title>
		<style>
			/* 相对定位，box2引入图片 压到box1上边 */
			div.box1{
				width: 300px;
				height: 300px;
				/* border: 1px solid red; */
				background: url(img/仓鼠.png);
				background-size: 100%;
				z-index: 1;
				position: absolute;
			}
			div.box2{
				width: 300px;
				height: 300px;
				background: url(img/荷兰猪.png);
				background-size: 100%;
				position: absolute;
				t op: -300px;
				/* 堆叠 z-index 针对所有position */
				z-index: 2;
				
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位 相对于元素定位
				功能：单一元素定位，元素在正常文档流中，推荐
			position属性：relative; 声名元素可以用相对定位意义
				方向属性：left,right,top,bottom
				堆叠顺序属性: z-index
						属性值数值，数值越大，越靠前
				绝对定位： 定位祖先【页面左上角】 进行定位
						功能：脱离文档流，不占据原空间
						方向属性和叠加属性和相对以及固定定位共用
						position属性：absilute;声名文员可以使用绝对定位
			实际开发：相对定位结合绝对定位一起使用	
		 -->
		 <div class="box1"></div>
		 <div class="box2"></div>
	</body>
</html>